<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>物业账单</title>
</head>
<body>
<style type="text/css">
    body {
        padding: 0;
        margin: 0;
    }
    .app{
        width: 100%;
        height: 100%;
    }
    .summary{
        height: 7.5rem;
        background-color: #383838;
        text-align: center;
        color: #B6B6B6;
        font-size: 0.8rem;
    }
    .summary div{
        padding-top: 0.5rem;
    }
    .summary .title{
        padding-top: 1rem;
    }
    .summary .room{
        font-size: 0.7rem;
    }
    .summary .money{
        color: #fff;
        font-size: 2rem;
    }
    .bill_nav{
        background-color: #EAE9DF;
        height: 3rem;
    }
    .bill_nav .on{
        border-bottom: 2px solid #F39605;
        color: #000;
    }
    .bill_nav_item{
        width: 49%;
        height: 3rem;
        line-height: 3rem;
        display: inline-block;
        font-size: 1rem;
        text-align: center;
        vertical-align: bottom;
        text-decoration: none;
        color: #9D9D9C;
    }
    .bill_list{
        margin: 0 1rem;
    }
    .bill_item{
        padding: 0.5rem 0;
        display: block;
        border-bottom: 1px solid #ccc;
        position: relative;
    }
    .bill_item div{
        padding: 0.3rem 0;
    }
    .bill_item .date{
        font-size: 1.5rem;
    }
    .bill_item .desc{
        font-size: 0.8rem;
    }
    .bill_item .pay{
        font-size: 1.2rem;
        color: #DB4E28;
        right: 1rem;
        top: 1.2rem;
        position: absolute;
    }
</style>
div class="app">
    <div class="summary">
        <div class="title">未缴金额合计</div>
        <div class="money">398.89</div>
        <div class="room">房间：中国第一村</div>
    </div>
    <div class="bill">
        <div class="bill_nav">
            <a href="#" class="bill_nav_item on">未缴账单</a>
            <a href="#" class="bill_nav_item">历史账单</a>
        </div>
        <div class="bill_list">
            <a class="bill_item">
                <div class="date">2017年6月</div>
                <div class="desc">本期费用合计 123.5，本期未缴费用 123.5</div>
                <div class="pay">缴 费</div>
            </a>
        </div>
    </div>
</div>
</body>
</html>